(function ($) {
    var fileUploadCount = 0;
    var uploadedImageCount = 0;  // 已上传的图片数量
    var uploadedMp4Exists = false;  // 是否已经上传了一个 MP4 文件

    $.fn.fileUpload = function () {
        return this.each(function () {
            var fileUploadDiv = $(this);
            var fileUploadId = `fileUpload-${++fileUploadCount}`;
            var isDropping = false; // 标记是否正在拖放文件

            // Creates HTML content for the file upload area.
            var fileDivContent = `
                <label for="${fileUploadId}" class="file-upload image-upload__box">
                    <div class="image-upload__boxInner">
                        <i class="ph ph-cloud-arrow-up mb-8 image-upload__icon"></i>
                        <h5 class="mb-4">拖拽或者点击图片/视频 <span class="text-main-600"> 上传</span></h5>
                        <p class="text-13">最多支持上传9张图片</p>
                        <p class="text-13">(最大50MB)</p>
                    </div>
                    <input type="file" id="${fileUploadId}" name="[]" multiple hidden />
                </label>
            `;

            fileUploadDiv.html(fileDivContent).addClass("file-container");

            // Function to handle file upload to the server
            function uploadFile(file) {
                // 在上传之前进行文件类型的检查和数量的限制
                var fileType = file.type;

                if (fileType.startsWith("image")) {
                    // 检查是否已上传过MP4文件，如果上传了MP4，则不允许上传图片
                    if (uploadedMp4Exists) {
                        Qmsg.error("已上传一个MP4视频，无法上传图片");
                        return; // 停止上传
                    }

                    // 检查图片数量是否超过9张
                    if (uploadedImageCount >= 9) {
                        Qmsg.error("最多只能上传9张图片");
                        return; // 停止上传
                    }

                } else if (fileType === "video/mp4") {
                    // 检查是否已经上传过一个MP4文件
                    if (uploadedMp4Exists) {
                        Qmsg.error("最多上传一个MP4视频文件");
                        return; // 停止上传
                    }

                    // 如果已上传过图片，则不允许再上传MP4
                    if (uploadedImageCount > 0) {
                        Qmsg.error("已上传图片，无法再上传MP4视频");
                        return; // 停止上传
                    }

                } else {
                    // 如果文件既不是图片也不是MP4视频
                    Qmsg.error("仅支持上传图片或MP4视频");
                    return; // 停止上传
                }


                var formData = new FormData();
                formData.append('file', file); // Append the file to the form data

                $.ajax({
                    url: '/api/upload.php', // Replace with your upload URL
                    type: 'POST',
                    data: formData,
                    processData: false, // Don't process the files
                    contentType: false, // Set content type to false
                    success: function (response) {
                        var res = response;
                        if (res.status == 200) {
                            // Handle successful upload
                            if (fileType.startsWith("image")) {
                                uploadedImageCount++; // 增加图片数量
                            } else if (fileType === "video/mp4") {
                                uploadedMp4Exists = true; // 标记已经上传MP4视频
                            }
                            //console.log(res.message);
                            //console.log(uploadedImageCount)
                            displayUploadedImages(res.message, file);
                        } else {
                            // Handle unsuccessful upload
                            Qmsg.error(res.message);
                        }
                    },
                    error: function () {
                        // Handle error
                        Qmsg.error("An error occurred while uploading the file.");
                    }
                });
            }
            window.displayUploadedImages = function(images, file) {
                console.log('use displayUploadedImages success');
                // 如果返回的是字符串（单张图片），将其转换为数组
                if (typeof images === 'string') {
                    images = [images];
                }

                var uploadResultDiv = $('#uploadResult');
                var fileName = file.name;
                var fileType = file.type;
                // 获取存放图片地址的 input 元素
                var imagesInput = $('input[name="images"]');

                // 获取当前 input 中的值（已存放的图片地址）
                var currentImageValue = imagesInput.val();

                // 遍历每张上传成功的图片
                images.forEach(function (imageUrl) {
                    // 生成预览HTML
                    var preview = fileType.startsWith("image")
                        ? `<img src="${imageUrl}" alt="${fileName}" class="uploaded-image" style="max-width:300px;max-height:1000px">`
                        : `<video controls style="max-width:300px;max-height:1000px">
                           <source src="${imageUrl}" type="video/mp4">
                           您的浏览器不支持视频标签。
                       </video>`; // 视频标签

                    var filePreviewHtml = `
            <div class="file-preview">
                ${preview}
                <button type="button" class="image-upload__deleteBtn"><i class="ph ph-x"></i></button>
            </div>
        `;

                    // 将预览内容追加到 uploadResult 容器中
                    uploadResultDiv.append(filePreviewHtml);

                    // 将图片地址追加到 input 中，用逗号分隔
                    if (currentImageValue) {
                        currentImageValue += `,${imageUrl}`; // 追加新图片地址
                    } else {
                        currentImageValue = imageUrl; // 如果没有已有图片地址，则直接赋值
                    }
                    imagesInput.val(currentImageValue);

                    // 处理删除按钮的点击事件
                    uploadResultDiv.find('.image-upload__deleteBtn').last().click(function () {
                        $(this).parent('.file-preview').remove();
                        // 删除图片后同步更新 input 中的值
                        currentImageValue = imagesInput.val().split(',').filter(function (item) {
                            return item !== imageUrl; // 移除已删除的图片地址
                        }).join(',');

                        imagesInput.val(currentImageValue); // 更新 input 的值

                        // 根据删除的文件类型，更新计数
                        if (file.type.startsWith("image")) {
                            uploadedImageCount--;  // 减少图片计数
                        } else if (file.type === "video/mp4") {
                            uploadedMp4Exists = false;  // 允许再上传 MP4
                        }
                    });
                });
            }

            // Adds the information of uploaded files to file upload area.
            // 在 handleFiles 函数中，处理选定的多个文件
            function handleFiles(files) {
                if (files.length > 0) {
                    // 遍历所有选中的文件并上传
                    for (var i = 0; i < files.length; i++) {
                        uploadFile(files[i]); // 调用 uploadFile 函数逐个上传文件
                    }

                    // 处理文件的预览，不再更新上传区，而是直接追加到 #uploadResult
                    for (var i = 0; i < files.length; i++) {
                        var file = files[i];
                        var fileName = file.name;
                        var fileType = file.type;

                        // 预览逻辑已经移到 displayUploadedImages
                        //displayUploadedImages(URL.createObjectURL(file), file);
                    }
                }
            }


            function initializeFileUpload() {
                var fileInput = fileUploadDiv.find(`label.file-upload input[type="file"]`);

                // 防止重复绑定事件
                fileUploadDiv.off("dragover drop").on({
                    dragover: function (e) {
                        e.preventDefault();
                        fileUploadDiv.toggleClass("dragover", e.type === "dragover");
                    },
                    drop: function (e) {
                        e.preventDefault();
                        fileUploadDiv.removeClass("dragover");

                        var files = e.originalEvent.dataTransfer.files;
                        // 获取当前 input 中的值（已存放的图片或视频地址）
                        var imagesInput = $('input[name="images"]');
                        var currentImageValue = imagesInput.val();
                        var currentUploadedImages = currentImageValue ? currentImageValue.split(',') : []; // 已上传的文件数组
                        var currentImageCount = currentUploadedImages.length; // 已上传的文件数量
                        var newImageCount = files.length; // 新选择的文件数量

                        // 检查是否已上传 .mp4 文件
                        var hasMp4 = currentUploadedImages.some(function (image) {
                            return image.endsWith('.mp4');
                        });

                        // 检查拖放的文件中是否有 .mp4
                        var newFilesContainMp4 = Array.from(files).some(function (file) {
                            return file.name.endsWith('.mp4');
                        });

                        // 如果已经有视频文件，阻止上传任何新文件（包括图片和视频）
                        if (hasMp4) {
                            Qmsg.error("已经上传了一个视频文件，不能再上传图片或视频");
                            // 清空输入框，防止用户上传文件
                            $(e.target).val('');
                            return; // 停止后续操作
                        }

                        // 如果新选择的文件中包含视频，阻止上传图片
                        if (newFilesContainMp4 && currentImageCount > 0) {
                            Qmsg.error("不能同时上传视频和图片");
                            // 清空输入框，防止用户上传文件
                            $(e.target).val('');
                            return; // 停止后续操作
                        }

                        // 检查总的文件数量（已上传 + 新选择）
                        if (currentImageCount + newImageCount > 9) {
                            Qmsg.error("最多只能选择9张图片");
                            // 清空输入框，防止用户上传超过数量的文件
                            $(e.target).val('');
                            return; // 停止后续操作
                        }

                        /*var droppedFiles = e.originalEvent.dataTransfer.files; // 获取拖拽的文件
                        var imageCount = 0; // 拖拽的图片计数
                        var mp4Count = 0; // 拖拽的MP4计数

                        // 遍历拖拽的文件，统计数量
                        for (var i = 0; i < droppedFiles.length; i++) {
                            var fileType = droppedFiles[i].type;
                            if (fileType.startsWith("image")) {
                                imageCount++;
                            } else if (fileType === "video/mp4") {
                                mp4Count++;
                            }
                        }

                        // 检查总上传数量是否超过限制
                        if (imageCount > 9) {
                            Qmsg.error("最多只能上传9张图片");
                            return; // 停止上传
                        }

                        if (mp4Count > 1) {
                            Qmsg.error("最多上传一个MP4视频文件");
                            return; // 停止上传
                        }
                        if (uploadedMp4Exists && imageCount > 0) {
                            Qmsg.error("已上传一个MP4视频，无法上传图片");
                            return; // 停止上传
                        }

                        if (uploadedImageCount + imageCount + (uploadedMp4Exists ? 1 : 0) > 10) {
                            Qmsg.error("最多只能上传9张图片或者1个MP4视频");
                            return; // 停止上传
                        }*/
                        //console.log('已上传的图片数量:', imageCount);
                        //console.log('是否已上传MP4:', mp4Count);


                        // 如果数量都符合条件，清空 input 的值，并处理文件
                        //fileInput.val('');  // 清空 fileInput 的值，防止 change 事件触发
                        handleFiles(files); // 处理拖拽的文件
                    },


                });

                fileInput.on('change', function () {
                    var files = this.files;
                    // 获取当前 input 中的值（已存放的图片地址）
                    var imagesInput = $('input[name="images"]');
                    var currentImageValue = imagesInput.val();
                    var currentUploadedImages = currentImageValue ? currentImageValue.split(',') : []; // 已上传的图片数组
                    var currentImageCount = currentUploadedImages.length; // 已上传的图片数量
                    var newImageCount = files.length; // 新选择的图片数量

                    console.log("fileInput.onchange")
                    var hasMp4 = currentUploadedImages.some(function (image) {
                        return image.endsWith('.mp4');
                    });

                    // 检查新选择的文件中是否有 .mp4
                    var newFilesContainMp4 = Array.from(files).some(function (file) {
                        return file.name.endsWith('.mp4');
                    });

                    if (hasMp4) {
                        Qmsg.error("已经上传了一个视频文件，不能再上传图片或视频");
                        // 清空输入框，防止用户上传文件
                        $(this).val('');
                        return; // 停止后续操作
                    }

                    // 如果新选择的文件中包含视频，阻止上传图片
                    if (newFilesContainMp4 && currentImageCount > 0) {
                        Qmsg.error("不能同时上传视频和图片");
                        // 清空输入框，防止用户上传文件
                        $(this).val('');
                        return; // 停止后续操作
                    }

                    // 检查总的图片数量（已上传 + 新选择）
                    if (currentImageCount + newImageCount > 9) {
                        Qmsg.error("最多只能选择9张图片");
                        // 清空输入框，防止用户上传超过数量的文件
                        $(this).val('');
                        return; // 停止后续操作
                    }
                    handleFiles(this.files);
                });
            }




            initializeFileUpload();
        });
    };
})(jQuery);

// Apply fileUpload functionality to each container with the class "fileUpload"
$('.fileUpload').fileUpload();
